import React, { ReactNode } from 'react';
import styles from './index.module.scss';
import classNames from 'classnames';

// type Props = {
//   palceholder?: string;
//   className?: string;
//   extra?: ReactNode;
//   errorMsg?: string;
//   //   索引类型
//   [key: string]: any;
// };

// Props 高级写法，继承所有 input 属性
interface Props
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  className?: string;
  extra?: ReactNode;
  errorMsg?: string;
}

export default function Input({
  className,
  extra,
  errorMsg,
  ...restProps
}: Props) {
  return (
    <div className={styles.root}>
      <input className={classNames('input', className)} {...restProps} />
      <div className="extra"> {extra} </div>
      <div className="validate">{errorMsg}</div>
    </div>
  );
}
